import React, { Component } from 'react';
import { Popconfirm, message } from 'antd';
import { connect } from 'react-redux';
import { DollarOutlined } from '@ant-design/icons'

// 引入自定义操作
import { PopupActivate } from '../../../../redux/actions/popup'
import { UserGetTaskSaga } from '../../../../redux/actions/contentpage'

class Popcon extends Component{

    constructor(props) {
        super(props);
        this.state = {disabled: false}
    }

    // 发送请求领取任务
    confirm(taskId) {
        const { baseUserInfo, userState } = this.props
        console.log(" task is  ", taskId)
        const obj = {
            id: taskId,
            email: baseUserInfo.email,
            username: baseUserInfo.username,
            isLogin: userState.isLogin
        } 
        this.props.UserGetTaskSaga(obj)
        // message.success('领取中');
      }

    cancel(e) {
        message.error('已取消');
    }

    handleClick = () => {
        const { userState } = this.props
        if (!userState.isLogin){
            const obj = {
                activate: true,
                btn_left: "取消",
                btn_right: "登录",
                content: '您目前还未登录，暂时无法领取任务，可以点击下方登录按钮进行登录'
            }
            this.props.PopupActivate(obj)
        }
    }

    render() {
        const { userState } = this.props
        return (
            <Popconfirm
                title="你想要领取这个任务吗?"
                onConfirm={(taskId)=> this.confirm(this.props.taskId)}
                onCancel={this.cancel}
                okText="领取"
                cancelText="取消"
                okButtonProps={this.props.taskId}
                disabled={userState.isLogin ? false : true}
            >
                <a onClick={this.handleClick}>{this.props.title}
                    <b style={{
                        "fontSize":"20px", 
                        "color":"#ffd700",
                        "marginLeft": "16px"
                        }}>
                            <DollarOutlined />
                            {this.props.money}
                    </b>
                </a>
            </Popconfirm>
        )
    }
}

export default connect(
    state => ({
        userState: state.PublicReducer.userLoginState,
        baseUserInfo: state.PublicReducer.baseUserInfo,
    }),
    {
        PopupActivate,
        UserGetTaskSaga, // 领取任务
    }
)(Popcon)

